<script setup lang="ts">
  import { MinusOutlined, PlusOutlined } from '@ant-design/icons-vue';
  import { ref, h, reactive } from 'vue';
  import Run from '/@/components/management/run.vue';

  const type = ref('a');

  const labelCol = { style: { width: '150px' } };
  const wrapperCol = { span: 14 };

  const formState = reactive({
    id: '',
    date: '',
  });

  const columns = [
    { title: '测点ID', dataIndex: 'id', key: 'id', width: 90, align: 'center' },
    { title: '时间戳', dataIndex: 'time', key: 'time', align: 'center' },
    { title: 'A相电压', dataIndex: 'AVoltage', key: 'AVoltage', align: 'center' },
    { title: 'B相电压', dataIndex: 'BVoltage', key: 'BVoltage', align: 'center' },
    {
      title: 'C相电压',
      dataIndex: 'CVoltage',
      key: 'CVoltage',
      align: 'center',
    },
    { title: 'A相电流', dataIndex: 'ACurrent', key: 'ACurrent', align: 'center' },
    { title: 'B相电流', dataIndex: 'BCurrent', key: 'BCurrent', align: 'center' },
    {
      title: 'C相电流',
      dataIndex: 'CCurrent',
      key: 'CCurrent',
      align: 'center',
    },
  ];

  const tableData = ref([
    {
      id: '001',
      time: '',
      AVoltage: '',
      BVoltage: '',
      CVoltage: '',
      ACurrent: '',
      BCurrent: '',
      CCurrent: '',
    },
    {
      id: '002',
      time: '',
      AVoltage: '',
      BVoltage: '',
      CVoltage: '',
      ACurrent: '',
      BCurrent: '',
      CCurrent: '',
    },
  ]);
</script>

<template>
  <div class="container">
    <div class="condition">
      <a-radio-group v-model:value="type" button-style="solid">
        <a-radio-button value="a">电</a-radio-button>
        <a-radio-button value="b">水</a-radio-button>
        <a-radio-button value="c">气</a-radio-button>
        <a-radio-button value="d">暖</a-radio-button>
        <a-radio-button value="e">冷</a-radio-button>
      </a-radio-group>

      <div class="formState">
        <span>测点ID:</span>
        <a-select v-model:value="formState.id" placeholder="please select your zone">
          <a-select-option value="shanghai">Zone one</a-select-option>
          <a-select-option value="beijing">Zone two</a-select-option>
        </a-select>
        <span>时间跨度:</span>
        <a-range-picker v-model:value="formState.date" />

        <a-button type="primary">查询</a-button>
      </div>
    </div>

    <div class="info">
      <a-card title="查询结果列表">
        <a-table :columns="columns" :data-source="tableData" rowKey="id"></a-table>
      </a-card>

      <a-card title="曲线图展示">
        <div class="chart"><Run /></div>
      </a-card>
    </div>
  </div>
</template>

<style scoped>
  .formState {
    margin: 10px 0;
    display: flex;
    align-items: center;
    span {
      margin: 0 10px;
    }

    .ant-select {
      width: 250px;
    }

    button {
      margin-left: 20px;
    }
  }

  .info {
    display: flex;

    .ant-card {
      width: 50%;
      margin: 0 5px;
      min-height: 70vh;
    }
  }
</style>
